<template>
	<view style="height: 100%;">
		<view class="item-layout">
			<uni-file-picker :imageStyles="imageStyles" limit="1" file-mediatype="image" @select="upload">
				<view class="item-text">头像</view>
				<image class="userinfo-avatar" :src="avatarUrl"></image>
				<text class="item-icon">&#xe470;</text>
			</uni-file-picker>
		</view>
		<view class="item-layout">
			<view class="item-text">昵称</view>
			<text class="item-icon" style="margin-left: auto;">{{this.userName}} &#xe470;</text>
		</view>
		<view class="item-layout">
			<view class="item-text">手机号</view>
			<text class="item-icon" style="margin-left: auto;">{{this.phoneNumber}} &#xe470;</text>
		</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	import configService from '@/common/service/config.service.js'
	import {ACCESS_TOKEN} from '@/common/constant.js'
	
	export default {
		data() {
			return {
				imageStyles: {
					width: "100%",
					height: 50,
					border: {
						width: "0px"
					}
				},
				avatarUrl: null,
				userName: null,
				phoneNumber: null
			}
		},
		methods: {
			
			updateUserInfo(user) {
				let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/;
				this.avatarUrl = user.avatarUrl;
				this.userName = user.userName;
				if (null != user.phone) {
					this.phoneNumber = user.phone.replace(reg,"$1****$2");
				}
			},
			
			async getUserInfo() {
				return new Promise((resolve, reject) => {
					http.get('/sys/getUser').then(res => {
						resolve(res.data)
					})
				})
			},
			
			upload(e) {
				var file = e.tempFiles[0];
				file.status = 'uploading';
				uni.uploadFile({
					url: configService.apiUrl + '/user/uploadAvatar',
					filePath: file.path,
					name: 'file',
					header: {
						"Authorization": uni.getStorageSync(ACCESS_TOKEN)
					},
					success: (res) => {
						file.status = 'success';
						uni.showToast({
							title: '头像上传成功'
						})
						this.avatarUrl += '&timestamp=' + new Date().getTime();
					},
					fail: (res) => {
						file.status = 'failed';
						uni.showToast({
							title: '头像上传失败',
							icon: 'error'
						})
					}
				});
				
				uni.showLoading({
					title: '头像上传中'
				});
				let second = 1000;
				const timer = setInterval(() => {
					second--;
					if (second == 0 || file.status != 'uploading') {
						clearInterval(timer);
						uni.hideLoading();
					}
				}, 500);
			},
			
			async getAndUpdateUserInfo() {
				var result = await this.getUserInfo();
				if (result.code == 200) {
					this.updateUserInfo(result.data);
				}
			}
		},
		
		async mounted() {
			this.getAndUpdateUserInfo();
		}
	}
</script>

<style>
	.item-layout {
		display: flex;
		width: 100%;
		height: 40px;
		color: black;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-top: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.item-text {
		font-size: 16px;
		vertical-align: middle;
		margin-left: 10px;
		margin-top: auto;
		margin-bottom: auto;
	}
	.item-icon {
		font-family: uniicons;
		font-size: 16px;
		color: rgb(75, 75, 75);
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
		justify-content: flex-end;
	}
	.userinfo-avatar {
		display: flex;
		border-radius: 64rpx;
		width: 64rpx;
		height: 64rpx;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
		justify-content: flex-end;
	}
	.popup-layout {
		background-color: white;
		height: 100px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.popup-line {
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
		font-size: 18px;
	}
</style>